<template>
	<view class="page">
		<u-mask :show="open" :maskClickAble="false" @click="show = false"></u-mask>
		<!-- <view class="list">
			<text class="biaoHao contentFontTxt">合同编号:</text>
			<text class="hao" style="margin-left: 10rpx;">RRSDA000001</text>
		</view>
		<view class="title contentFontTxt">
			甲方信息
		</view> -->
		<view class="topSearch">
			<view class="searchBox centerFlex">
				<view class="icon">
					<image src="@/static/Icon/serch.png" mode="" class="icon"></image>
				</view>

				<input placeholder="请输入企业信息" @click="$next(`/pages/contract/search`)" disabled class="sch" />
				<view @click="$next(`/pages/contract/search`)" class="txt">
					搜索
				</view>
			</view>
			<view class="history-list" v-if="open == true">
				<view class="title">合同历史</view>
				<scroll-view style="height: 350rpx;" scroll-y="true">
					<view class="items">
						<view class="item" v-for="(item,index) in myContractList" :key="index">
							<text class="contract">{{item.contractTemplate.name}}</text>
							<text class="leading-in" @click="leadingIn(item)">导入</text>
						</view>


					</view>
				</scroll-view>

			</view>
			<view class="look-more centerFlex" v-if="open == false" @click="openHistory">
				<text>展开</text>
				<image src="@/static/Icon/open.png" mode="widthFix"></image>
			</view>
			<view class="look-more centerFlex" v-if="open == true" @click="openHistory">
				<text>收起</text>
				<image src="@/static/Icon/close.png" mode="widthFix"></image>
			</view>
		</view>
		<u-gap height="16" bg-color="#f9f9fb"></u-gap>
		<view class="item contentTitleFont" style="background-color: #F9F9FB; line-height: 65rpx; height: 65rpx;" v-if="contract.tagUrl !== ''">
			甲方信息
		</view>
		<u-form :model="form" ref="uForm">

			<view class="item radioItem" v-for="(item,index) in formList" :index="index">
				<view class="left radioLeft contentTitleFont ">
					{{item.cname}}
				</view>
				<view class="right radioRight">
					<input class="u-input__input" v-if="item.type == 0" v-model="form[item.ename]"
						:placeholder="`请输入${item.cname}`" />
					<radio-group @change="radioChange" v-if="item.type == 1">
						<radio v-for="(item1, index1) in split(item.values)"
							:checked="checkIsChecked(item.ename,index1)" :index="index1"
							:value="`${item.ename}|${index1}|${split(item.values).length}`">
							{{item1}}
						</radio>
					</radio-group>
					<u-table v-if="item.type == 3">
						<u-tr v-for="(item2,index2) in form[item.ename].length" :index="index2">
							<template v-if="index2 == 0">
								<u-th>时间</u-th>
								<u-th>分月计划（万千瓦时）</u-th>
							</template>
							<template v-else>
								<u-td><input disabled v-model="form[item.ename][index2][0]" placeholder="请输入" /></u-td>
								<u-td><input type="text" :value="form[item.ename][index2][1]" @input="changeInput($event,index2,item.ename)" /></u-td>
							</template>
						</u-tr>
					</u-table>
					<text style="line-height: 70rpx;" @click="chooseDate(item.ename)"
						v-if="item.type == 5">{{form[item.ename]||'请选择'}}</text>
				</view>

			</view>
		</u-form>
		
		<view class="footer">
			<!-- <u-radio-group v-model="value1" @change="radioGroupChange">
				<u-radio @change="radioChange" v-for="(item, index) in split(item.values)" :index="index"
					:name="item.name" :label-size="10" style="margin-right: 30rpx;">

					{{item.name}}
				</u-radio>
			</u-radio-group> -->
			<view class="submit" @click="submit" v-if="contract.tagUrl !== ''">
				确认签约
			</view>
			<view class="look" @click="downContract">
				下载合同模版
			</view>
		</view>


		<!-- 日期选择组件 -->
		<u-calendar v-model="calendarShow" mode="date" @change="changeCalendar"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '我已仔细阅读本协议全文，并接受甲乙双方权利与义务',
					disabled: false
				}],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				formList: [],
				calendarShow: false, //日期组件显示
				contract: {},
				open: false,
				mask: true,
				checkedField: "", //选中的字段
				myContractList: [],
				form: {

				},

			}
		},
		onLoad(options) {
			this.form.id = options.id
			this.getTemplate()
			this.getMyContract()
		},
		onShow() {
			
		},

		mounted() {
			uni.$on('chooseCompany', (res) => {
				let chooseCompany = res
				if (chooseCompany.id == undefined) {
					//将选中的公司存入库
					this.$axios.request(this.$api.addCustomCompany, "POST", res).then((val) => {
						this.$set(this.form, "company_mobile", res.companyMobile)
						this.$set(this.form, "company_person", res.companyPerson)
						this.$set(this.form, "company_address", res.companyAddress)
						this.$set(this.form, "credit_code", res.creditCode)
						this.$set(this.form, "company_name", res.companyName)
					})
				} else {
					this.$set(this.form, "company_mobile", res.companyMobile)
					this.$set(this.form, "company_person", res.companyPerson)
					this.$set(this.form, "company_address", res.companyAddress)
					this.$set(this.form, "credit_code", res.creditCode)
					this.$set(this.form, "company_name", res.companyName)
				}

			})
		},

		methods: {
			split(str) {
				return str.split(",")
			},
			//导入
			leadingIn(item) {
				if (item.sourceId == this.form.id) {
					
					this.form = JSON.parse(item.formData)
				} else {
					var formdata = JSON.parse(item.formData)
					this.$set(this.form, "company_mobile", formdata.company_mobile)
					this.$set(this.form, "company_person", formdata.company_person)
					this.$set(this.form, "company_address", formdata.company_address)
					this.$set(this.form, "credit_code", formdata.credit_code)
					this.$set(this.form, "company_name", formdata.company_name)
				}

				this.open = false
			},
			getMyContract() {
				this.$axios.request(this.$api.getMyContractRes, "GET", {
					page: 1,
					limit: 30,
					type: 0,
					orderField: 'id',
					order: 'desc'
				}).then((val) => {
					this.myContractList = val.data.list
				})
			},
			openHistory() {
				this.open = !this.open
			},
			changeInput(obj, index, ename) {
		
				this.$set(this.form[ename][index],1,obj.detail.value)
				// this.form[ename][index][1] = obj.detail.value
			},
			downContract() {
				this.$utils.downLoad(this.$axios.interfaceUrl() + this.contract.url)
			},
			chooseDate(ename) {
				this.checkedField = ename
				this.calendarShow = true
			},
			//检测是否选中
			checkIsChecked(ename, index) {
				return this.form[ename + index] == '☑'
			},
			radioChange(e) {
				let arr = e.target.value.split("|")

				this.fillingField(arr[2], arr[0], arr[1])
			},
			changeCalendar(e) {
				this.form[this.checkedField] = e.result
				this.calendarShow = false
			},
			getTemplate() {
				this.$axios.request(`${this.$api.getContract}/${this.form.id}`, "GET").then((val) => {
					this.contract = val.data
					uni.setNavigationBarTitle({
						title: `${val.data.name}表单`
					})
					val.data.formList.forEach((item, index) => {
						if (item.type == 3) {

							let listArr = this.split(item.values)
							let arr = new Array()
							arr[0] = ["时间", "分月计划（万千瓦时）"];
							listArr.forEach((item1, index1) => {
								arr[index1 + 1] = [item1, ""]
							})
							this.$set(this.form, item.ename, arr)
						}
					})
					this.formList = val.data.formList
				})

			},
			//此处提交
			submit() {

				this.$axios.request(this.$api.signContract, "POST", this.form).then((val) => {
					this.$next(
						`/pages/contract/contractConfirm?contractPath=${this.$utils.encryption(val.data)}&form=${this.$utils.encryption(this.form)}`
					)
				})

			},
			//填充其它字段
			fillingField(length, field, idx) {
				for (var i = 0; i < length; i++) {
					if (idx == i) {
						this.$set(this.form, `${field}${i}`, "☑")
					} else {
						this.$set(this.form, `${field}${i}`, "☐")
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../../style/contentFlex.css";

	.page {
		width: 100%;
		height: 100%;
		background-color: #F9F9FB;
		// background-color: red;
		overflow: hidden;
		// padding-bottom: 16rpx;
	}

	.mask {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 100%;
	}

	.topSearch {
		background-color: #FFFFFF;
		position: relative;
		z-index: 9999999999;
	}

	.searchBox {
		width: 702rpx;
		height: 72rpx;
		background: rgba(0, 0, 0, 0.06);
		margin: 0 auto 0;

		.icon {
			width: 34rpx;
			height: 28rpx;
		}

		.sch {
			width: 546rpx;
			height: 40rpx;
			margin: 0 16rpx;
			border-right: 2rpx solid #A8B5C5;
		}

		.txt {
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 300;
			line-height: 60rpx;
			color: #3975EA;
			opacity: 1;
		}
	}

	.history-list {
		margin: 20rpx auto;

		.title {
			font-size: 24rpx;
			font-weight: bold;
			line-height: 55rpx;
			margin-left: 30rpx;
		}

		.contract {
			padding: 10rpx;
			background-color: #f5f5f5;
			border-radius: 5rpx;
			font-size: 22rpx;
		}

		.leading-in {
			padding: 10rpx 15rpx;
			color: #2e6adf;
			border-radius: 5rpx;
			border: 1px solid #2e6adf;
			font-size: 22rpx;
		}


		// .item{
		// 	margin-bottom:15rpx;
		// }
		// .item:last-child{
		// 	margin-bottom:0rpx;
		// }

	}

	.look-more {
		height: 60rpx;

		text {
			font-size: 24rpx;
			color: #2e6adf;
			margin-right: 13rpx;
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}





	.list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 64rpx;
		padding: 0 32rpx;
		background-color: #FFFFFF;

	}

	// .title,
	// .item {
	// 	width: 100%;
	// 	padding: 0 32rpx;
	// }

	// .item {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	background-color: #FFFFFF;
	// 	margin-bottom: 4rpx;
	// }

	.contentFontTxt {
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #333333;
		line-height: 64rpx;
	}

	// .left {
	// 	text-align: left;
	// 	width: 228rpx;
	// 	height: 100%;
	// 	word-break: break-all;
	// 	word-break: break-word;
	// }

	// .right {
	// 	display: flex;
	// 	flex-direction: column;
	// 	/* align-items:; */
	// 	justify-content: center;
	// 	text-align: left;
	// 	width: 458rpx;

	// 	height: 100%;
	// }

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.yan {
		width: 160rpx;
		height: 40rpx;
		border: 1rpx solid #2E6ADF;
		color: #2E6ADF;
		text-align: center;
		border-radius: 4rpx;
		line-height: 35rpx;
	}

	.footer {
		width: 750rpx;
		height: 285rpx;
		padding: 16rpx 30rpx;
		margin-top: 16rpx;
		background-color: #FFFFFF;
	}

	.submit,
	.look {
		width: 686rpx;
		height: 64rpx;
		margin: 60rpx auto 16rpx;
		border-radius: 4rpx;
		background-color: #2E6ADF;
		font-size: 28rpx;
		font-family: "PingFang SC";
		text-align: center;
		font-weight: 400;
		line-height: 64rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.look {
		background-color: #F44336;
		margin: 16rpx auto 0;
	}

	.radioItem {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		/* padding: 0 0 0 32rpx; */
	}

	.radioItem>.radioLeft {
		// background-color: red;
		width: 100%;
		padding-right: 32rpx;
		word-break: break-all;
		word-break: break-word;
		margin: 0 auto 10rpx;
	}

	.radioItem>.radioRight {
		width: 100%;
		// padding-bottom: 5rpx;
		// border-bottom: 1rpx solid #eee;
	}

	// 公共的标题字体
	.contentTitleFont {
		font-size: 26rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		// line-height: 65rpx;
		color: #333333;
		opacity: 1;
		text-align: left;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		// height: 65rpx;
		padding: 10rpx 32rpx;
		background-color: #fff;
		margin-top: 4rpx;

	}

	.left {
		word-break: break-all;
		word-break: break-word;
		width: 228rpx;
	}

	.right {
		display: flex;
		flex-direction: column;
		width: 458rpx;
	}

	// 给必填选项的标题加样式
	.requiredStyle {
		color: red;
	}

	/* 单选按钮样式*/
	radio .wx-radio-input {
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #999;
		border-radius: 100%;
		background: #fff;
	}

	/*单选按钮选中后内部样式*/
	radio .wx-radio-input.wx-radio-input-checked {
		border: 2rpx solid #2E6ADF !important;
		background-color: #2E6ADF !important;
	}
	radio {
		margin-right: 30rpx !important;
	}
</style>
